<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes, viewport-fit=cover" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>识别结果</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/template-web.js"></script>
		<script src="../../js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/config.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				touch-action: none;
			}
			
			body {
				color: #fff;
				background: #000000;
			}
			
			.iconfont {
				font-size: 14vw;
			}
			
			.head {
				color: #007AFF;
				width: 100vw;
				height: 6vh;
				float: left;
				background: #000000;
				font-size: 6vw;
				line-height: 6vh;
				text-align: center;
				position: fixed;
				z-index: 99;
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				
			}
			.image {
				margin-top:6vh;
				position: absolute;
			}
			.image img{
				width: 94vw;
				height: 30vh;
				margin: 3vw;
				border: #fff 1vw solid;
				border-radius: 3vw;
			}		
			.mui-content {
				
				background: #000;
				margin: 0 auto;
				width: 94vw;
			
			}
			
			.mui-content li {
				background: #fff;
				margin: 3vw auto;
				font-size: 5vw;
				margin: 2vw;
				border-radius: 3vw;
				color: #007AFF;
				border: #007AFF 1px solid;
				text-align: center;
				list-style-type: none;
				line-height: 12vw;
			}
			.mui-col-sm-12{
				overflow: hidden;
			}
			.mui-content li img{
				float: left;
				border-radius: 5px;
				width: 16vw;
				height: 16vw;
			}
			.title{
				white-space:nowrap; 
				text-overflow:ellipsis;
				overflow:hidden;
				float: left;
				width: 60vw;
				height: 15vw;
				margin-left: 3vw;
				font-size: 6vw;
			}
			.xsd{
				font-size: 1vw;float: right;
				bottom: -3vw;
				right: 10vw;
				position: absolute;
			}
			
			.floot{
				z-index: 999;
				flex: auto;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100vw;
				height: 12vw;
				background: #000;
				border-top: #FFFFFF 1px solid;
			}
			.floot li{
				list-style-type: none;
				-moz-box-sizing: border-box;
				border: #323232 1px solid;
			}
			.modalDIY{
	position: fixed;
		z-index: 9999999;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				background: rgba(0,0,0,0.6);
				display: flex;
			align-items: center;
				align-content: center;
			justify-content: center;
					   }
				.bg{
				background: #fff;
				border-radius: 10px;
				width: 90%;
						
					}
				.modalTitle{
				margin-top: 3vw;
				margin-bottom: 3vw;
					text-align: center;
					padding: 30rpx 40rpx 0 40px;
					font-size: 5vw;
					line-height: 55px;
					color: #000;
					}
					.modalContent{
				z-index: 99;
					display: flex;
					flex-flow: row wrap;
				justify-content: space-between;
				box-sizing: border-box;
			height: 30vh;
			padding:5vw;
				overflow: auto;
				font-size: 40px;
				color: #7a7a7a;
				}
					.modalOperate{
				text-align: center;
					height: 50px;
				z-index: 999;
				line-height: 50px;
				border-top: 2rpx solid #eee;
				display: flex;
			border-top: #000000 solid 1px;
				}
				.cancelBtn{
			background: #222222;
				font-size: 4vw;
					flex: 1;
				}
				.comfirmBtn{
				background: #222222;
				font-size: 4vw;
					flex: 1;
				}
			.space{
			color: #000000;
		margin-bottom: 5vw;
		}
		.modalText{
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		flex: 0 0 20%;
	}
			.modalInput-title {
				height: 40px;
					flex: 0 0 80%;
					padding-left: 3vw;
					}
					.modalInput-message {
				height: 88px;
			flex: 0 0 80%;
				overflow: auto;
					}
			</style>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<body style="text-align:center;">
		<header class="mui-bar mui-bar-nav" style="background-color: #000000; ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">识别结果</h1>
		</header>
		<div class="image" id="">
			<img id="img" src="../../images/nickname.png" />
		</div>
		<div class="mui-scroll-wrapper" style="margin-top: 40vh; height: 54vh;">
			<div class="mui-scroll">
				<div class="mui-content">
					<div class="mui-row" id="message">
						<script type='text/html' id="tab-message">
							{{each childRespVos}}
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell recog" id="{{$value.id}}">
							<img src="{{$value.imagePath}}" οnerrοr="imgerrorfun({{$value.imagePath}});"/>
							<span class="title">{{$value.name}}</span>
							<span class="mui-navigate-right">
							</span>
							<span class="xsd" style="">相似度： {{$value.score}}%</span>
							<span hidden>{{$value.message}}</span>
						</li>
					</div>
				{{/each}}
				</script>

					</div>
				</div>
			</div>
		</div>
		<div class="floot">
			<div class="mui-row" id="menu">
				<div class="mui-col-sm-4 mui-col-xs-4">
					<li class="mui-table-view-cell recog" id="back">
						<span>
							返回
						</span>
					</li>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4">
					<li class="mui-table-view-cell recog" id="collect">
						<span>
							收藏
						</span>
					</li>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4">
					<li class="mui-table-view-cell recog" id="share">
						<span>
							分享
						</span>
					</li>
				</div>
			</div>
		</div>


		<div id="modal" class="modalDIY mui-hidden">
			<div class="bg">
				<span class=""></span>
				<div class="modalTitle">识别收藏</div>
				<input id="name" class="space" value="" placeholder="请输入标题" />
				<div class="modalOperate">
					<div id="_resetbtn" class="cancelBtn">取消</div>
					<div id="_comfirm" class="comfirmBtn">确定</div>
				</div>
			</div>
		</div>
		<div id="modal2" class="modalDIY mui-hidden">
			<div class="bg">
				<span class=""></span>
				<div class="modalTitle">识别分享</div>
				<div class="modalContent">
					<div class="modalText">标题:</div>
					<input id="title" class="modalInput-title" maxlength="30" value="" placeholder="请输入标题" />
					<div class="modalText">内容:</div>
					<textarea id="modalInput-message" class="modalInput-message" maxlength="200" value="" placeholder="请输入内容"></textarea>

				</div>
				<div class="modalOperate">
					<div id="_resetbtn2" class="cancelBtn">取消</div>
					<div id="_comfirm2" class="comfirmBtn">确定</div>
				</div>
			</div>
		</div>
		</div>
		<script src="../../js/common.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/app.js"></script>
		<script>
			mui.plusReady(function() {

				options = {
					scrollY: true, //是否竖向滚动
					scrollX: false, //是否横向滚动
					startX: 0, //初始化时滚动至x
					startY: 0, //初始化时滚动至y
					indicators: true, //是否显示滚动条
					deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
					bounce: true //是否启用回弹
				}
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});


				var data = JSON.parse(localStorage.getItem("data"));
				var list = [];

				if (data != null) {
					var reg = new RegExp('http://');
					var imgUrl = data.imagePath;
					if (!reg.test(imgUrl)) {
						imgUrl = local + "/" + imgUrl;
					}

					$('#img').attr('src', imgUrl);
					list = data.childRespVos;

					htmlstr = template('tab-message', data);
					var tul = document.getElementById("message");
					tul.innerHTML = htmlstr;
					var class_btn = document.getElementsByClassName('recog');
					for (var a = 0; a < class_btn.length; a++) {

						class_btn[a].addEventListener('tap', function() {
							for (var i = 0; i < list.length; i++) {
								if (list[i].id == this.id) {
									localStorage.setItem("childData", JSON.stringify(list[i]));
									var html = 'recoginition-deail.html';
									w = plus.webview.create(html, html, {
										hardwareAccelerated: true,
										scrollIndicator: 'none',
										scalable: true,
										bounce: 'all'
									});
									w.show('pop-in');
								}
							}
						})
					}
				}

				var modal = document.getElementById("modal");
				var modal2 = document.getElementById("modal2");
				mui("#menu").on('tap', '.recog', function() {
					var id = this.getAttribute("id");
					if (id == "back") {
						plus.webview.getWebviewById("recoginition-message.html").close();
					}
					if (id == "collect") {
						modal.classList.remove("mui-hidden");
					}
					if (id == "share") {
						modal2.classList.remove("mui-hidden");
					}
				});


				var _resetbtn = document.getElementById("_resetbtn");
				var _comfirm = document.getElementById("_comfirm");
				_resetbtn.addEventListener('click', function() {
					modal.classList.add("mui-hidden");
				});
				_comfirm.addEventListener('click', function() {
					var name = document.getElementById("name").value;
					
					data.name = name;
					console.log(data.name)
					if(name.toString() == "") {
						mui.toast('请输入收藏的名称!', {
							duration: 'long',
							type: 'div'
						}) 
						return false;
					}
					// console.log(JSON.stringify(data));
					mui.ajax(app.getUrl() + "identificationContent/save", {
						type: 'POST',
						dataType: 'json',
						contentType: "application/json;charset=UTF-8",
						data: data,
						async: true,
						timeout: 100000, //超时时间设置为10秒；
						beforeSend: function() {
							plus.nativeUI.showWaiting("收藏中...", "options");
							mask.show();
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
							mask.close(); //关闭遮罩层
						},
						success: function(res) {
							// console.log(res)
							if (res.errCode === "000000") {
								modal.classList.add("mui-hidden");
								mui.toast('收藏成功!', {
									duration: 'long',
									type: 'div'
								})
							} else {
								mui.toast('收藏失败!', {
									duration: 'long',
									type: 'div'
								})
							}
						},
						error: function(res) {
							modal.classList.add("mui-hidden");
							mui.alert('与服务器断开连接!请重新登录', function() {
								plus.webview.getWebviewById("recoginition-message.html").close();
								plus.webview.getWebviewById("index").close();
							});
						}
					});

				});
				var _resetbtn2 = document.getElementById("_resetbtn2");
				var _comfirm2 = document.getElementById("_comfirm2");
				_resetbtn2.addEventListener('click', function() {
					modal2.classList.add("mui-hidden");
				});

				_comfirm2.addEventListener('click', function() {

					var title = document.getElementById("title");
					var message = document.getElementById("modalInput-message");
					var parent = {
						title: title.value,
						message: message.value,
						imageRecognitionRespVo: data
					};
					if(title.value.toString() == "") {
						mui.toast('请输入标题!', {
							duration: 'long',
							type: 'div'
						}) 
						return false;
					}
					if(message.value.toString() == "") {
						mui.toast('请输入内容!', {
							duration: 'long',
							type: 'div'
						}) 
						return false;
					}
					console.log(JSON.stringify(parent));
					mui.ajax(app.getUrl() + "invitationContent/save", {
						type: 'POST',
						dataType: 'json',
						contentType: "application/json;charset=UTF-8",
						data: parent,
						async: true,
						timeout: 100000, //超时时间设置为10秒；
						beforeSend: function() {
							plus.nativeUI.showWaiting("分享中...", "options");
							mask.show();
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
							mask.close(); //关闭遮罩层
						},
						success: function(res) {
							console.log(res)
							if (res.errCode === "000000") {
								mui.toast('分享成功!', {
									duration: 'long',
									type: 'div'
								})
								modal2.classList.add("mui-hidden");
							} else {
								mui.toast('分享失败!', {
									duration: 'long',
									type: 'div'
								})
							}
						},
						error: function(res) {
							modal.classList.add("mui-hidden");
							mui.alert('与服务器断开连接!请重新登录', function() {
								plus.webview.getWebviewById("recoginition-message.html").close();
								plus.webview.getWebviewById("index").close();
							});

						}

					});
				});

				function imgerrorfun(url) {
					console.log(reg.test(imgUrl));
					var reg = new RegExp('http://');
					if (!reg.test(url)) {
						imgUrl = local + "/" + imgUrl;
					} else {
						imgUrl = '/images/no_find_image.jpg'
					}
				}
			});
		</script>
	</body>
</html>
